<!-- 项目根组件 -->

<template>
    <div>
        <!-- 侧边栏 -->
        <div class="aside">
            <!-- 个人资料 -->
            <div class="profile">
                <div class="user_image">
                    <img src="../statics/imgs/userdefault.png" alt="">
                </div>
            </div>
    
            <!-- menu菜单 -->
            <router-link to="/home" class="links highlight">
                <span class="glyphicon glyphicon-tint"></span>仪表盘</router-link>
            <router-link to="/teacher" class="links">
                <span class="glyphicon glyphicon-king"></span>讲师管理</router-link>
            <router-link to="/category" class="links">
                <span class="glyphicon glyphicon-list-alt"></span>分类管理</router-link>
            <a href="javascript:;" class="links" @click="isShow">
                <span class="glyphicon glyphicon-th"></span>课程管理
                <span class="fr glyphicon glyphicon-chevron-right" id="togglestyle"></span>
            </a>
            <div id="lessons">
                <router-link to="/add_lesson" class="links leftPa">课程添加</router-link>
                <router-link to="/lesson_list" class="links leftPa">课程列表</router-link>
            </div>
        </div>
    
        <!-- 顶部header导航 -->
        <nav class="navbar navbar-default header">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <span class="greenbgc glyphicon glyphicon-menu-hamburger"></span>
                    </a>
                </div>
    
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <router-link to="/user_center">
                                <span class="glyphicon glyphicon-user"></span> 个人中心</router-link>
                        </li>
                        <li>
                            <router-link to="/login">
                                <span class="glyphicon glyphicon-log-out"></span> 退出</router-link>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="glyphicon glyphicon-tasks"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- 占位 -->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            aIndex: 1
        }
    },
    mounted() {
        this.isHighLight();

        //设置左边导航栏的高度
        $(".aside").height($(window).innerHeight());
    },
    methods: {
        //控制菜单是否显示
        isShow() {
            $("#lessons").slideToggle(500);
            $("#togglestyle").toggleClass("glyphicon-chevron-right").toggleClass("glyphicon-chevron-down");
        },

        //控制菜单栏选项是否高亮
        isHighLight() {
            $(".aside a").click(function () {
                $(".aside a").removeClass("highlight");
                $(this).addClass("highlight");
            })  
        }
    },
    watch: {
        "$route": function (n, o) {
            if (/^\/home/.test(n.path)) {
                this.aIndex = 0;
            } else if (/^\/teacher/.test(n.path)) {
                this.aIndex = 1;
            } else if (/^\/category/.test(n.path)) {
                this.aIndex = 2;
            }
            $(".aside a").eq(this.aIndex).addClass("highlight");
            console.log(this.aIndex)
        }
    }
}
</script>
<style scoped>
.aside {
    width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #2f4050;
}

.aside .profile {
    width: 180px;
    height: 180px;
    background-color: #243443;
    overflow: hidden;
    margin-bottom: 20px;
}

.aside .profile .user_image {
    width: 80px;
    height: 80px;
    border: 3px solid rgba(250, 250, 250, 0.3);
    border-radius: 50%;
    margin: 20px auto;
}

.aside .profile .user_image img {
    width: 100%;
    vertical-align: middle;
    border-radius: 50%;
}

.aside .links {
    display: block;
    line-height: 40px;
    width: 100%;
    margin: 5px 0;
}

.aside .links span {
    padding: 0 15px;
}

.aside .highlight {
    background-color: #243443;
    color: #f6f6f6;
}

.leftPa {
    padding-left: 44px;
}

#lessons {
    display: none;
}

.greenbgc {
    padding: 5px;
    background-color: #5cb85c;
    color: #fff;
    top: -3px;
}

.navbar {
    background-color: transparent;
    border: none;
}

#togglestyle {
    line-height: 40px;
    font-weight: 100;
}

.header {
    background-color: #fff;
}
</style>